<!-- 首页组件 -->
<template>
  <div class="HomePage" >
    <div class="main" height="951px">
      <el-carousel >
        <el-carousel-item v-for="item in 2"  :key="item">
          <h3 class="small">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      
    };
  },
  
  computed: {},
  watch: {},
  methods: {
    
  },
  created() {},
  mounted() {
    
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang='less' scoped>
.HomePage{
  width: 100%;
  height: 100%;
  position: relative;
  .main{
      width: 100%;
      height: 100%;
      padding-top:129px;
      // height: calc(100% - 129px) !important;
      background: url('../../assets/images/index_bg.jpg') no-repeat center;
      background-size: cover;
      .el-carousel{
        height: 100%;
        .el-carousel__container{
          height: 100% !important;
           .el-carousel__item:nth-child(2n) {
              background: url('../../assets/images/shou_one.png') no-repeat center;
              background-size: cover;
            }
            
            .el-carousel__item:nth-child(2n+1) {
              background: url('../../assets/images/shou_one.png') no-repeat center;
              background-size: cover;
            }
        }
        .el-carousel__indicators{
          bottom: 16% !important;
          left: 16% !important;
          transform: translateX(-50%);
        }
      }
  }
}

</style>
<style scoped>
.el-carousel >>> .el-carousel__indicators--horizontal{
  bottom: 16% !important;
  left: 16% !important;
  transform: translateX(-50%);
}
.main >>> .el-carousel__container{
  height: 100% !important;
}
</style>